<template>
	<view class="content">
		<view style="width: 100%;height: 180rpx;display: flex;align-items: center;justify-content: center">
			<view style="width: 95%;display: flex;margin-top: 60rpx;">
				<uni-icons @click="back" type="back" size="30" style="font-size: 60rpx;color: #000;"></uni-icons>
			</view>
		</view>
		<view style="height: 120rpx;"></view>


		<view style="width: 80%;display: flex;align-items: center;">
			<view class="puDebg"
				style="width: 90rpx;height: 90rpx;background-image: url('../../static/logo.png');border-radius: 20rpx;flex-shrink: 0;">
			</view>
			<view style="font-size: 45rpx;font-weight: bold;margin-left: 20rpx;color: #000;">{{$t('login.22')}}</view>
		</view>

		<view style="height: 40rpx;"></view>

		<view style="width: 80%;border-radius: 10rpx;">
			<!-- <input v-model="form.user" placeholder="请输入手机号码" placeholder-class="pcls"
				style="width: 90%;padding: 35rpx 20rpx;" /> -->
			<view style="font-size: 60rpx;font-weight: bold;color: #000;">{{form.yhPhone}}</view>
		</view>
	
		<!-- <view style="height: 40rpx;"></view>
		<view style="width: 80%;border-radius: 10rpx;background-color: #000;display: flex;align-items: center;">
			<input v-model="form.pass" :password="showPassword" placeholder="请输入新密码" placeholder-class="pcls"
				style="flex: 1;padding: 35rpx 20rpx;" />
			<view v-if="form.pass" style="margin-right: 10rpx;">
				<uni-icons @click="showPassword = false" v-if="showPassword" type="eye" size="25"
					style="font-size: 40rpx;"></uni-icons>
				<uni-icons @click="showPassword = true" v-else type="eye-filled"
					style="color: #53462D;font-size: 40rpx;" size="25"></uni-icons>
			</view>
		</view> -->
		<view style="height: 40rpx;"></view>
		<view style="width: 80%;background-color: rgba(225, 225, 225, .4);border-radius: 50rpx;color: #000;display: flex;align-items: center;">
			<input :placeholder="$t('login.14')" v-model="form.code" placeholder-class="pcls" style="padding: 35rpx 20rpx;width: 80%;" />
			<view class="puBut3" @click="send" v-if="codeFalg" style="padding: 10rpx;width:150rpx;text-align: center;margin-right: 20rpx;border-radius: 50rpx;font-size: 25rpx;">
				{{$t('login.15')}}
			</view>
			<view class="puBut9" v-else
				style="padding: 10rpx;width:150rpx;text-align: center;margin-right: 20rpx; border-radius: 50rpx;font-size: 25rpx;">
				{{countDown}}S
			</view>
		</view>



		<view style="height: 120rpx;"></view>

		<view  @click="dialogToggle()" style="width: 80%;">
			<button class="puBut3" style="width: 100%;font-size: 35rpx;border-radius: 50rpx;">{{$t('login.22')}}</button>
		</view>

		<view style="height: 40rpx;"></view>


		<view style="height: 180rpx;"></view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" @change="change">
				<view style="width: 40vw;display: flex;flex-direction: column;align-items: center;">
					<view style="height: 40rpx;"></view>

					<view style="width: 90%;display: flex;justify-content: space-between;">

					</view>

					<view style="height: 40rpx;"></view>
				</view>
			</uni-popup>
		</view>
		

		<!-- 注销弹窗 -->
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" :cancelText="$t('popup.2')" :confirmText="$t('popup.3')" :title="$t('popup.1')" :content="$t('login.30')"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		encryption
	} from "@/static/js/aesEncrypt.js"
	import methods from "@/utils/methods.js"
	import main from "../../utils/main.js"
	export default {
		data() {
			return {
				country:'',
				showPassword: true,
				form: {
					user: '',
					code: '',
					pass: '',
					yhPhone:''
				},
				radioFalg: false,
				codeFalg: true,
				countDown: 60,
			}
		},
		onLoad() {
			this.country = this.$store.state.country
			const phone = uni.getStorageSync('phone');
			if (phone) {
				this.form.user = phone
				this.form.yhPhone = main.jxPhone(phone)
			}
		},
		watch: {
			countDown(newVal, oldVal) {
				if (newVal == 0) {
					clearInterval(this.codeDsObj)
					this.codeDsObj = null
					this.codeFalg = true
				}
			}
		},
		mounted() {
			//this.toggle('bottom')
		},
		methods: {
			phoneLogin() {
				uni.navigateTo({
					url: ''
				})
			},
			logout() {
				let self = this
				
				if (!self.form.code) {
					uni.showToast({
						icon: 'none',
						title: self.$t('login.14')
					})
					return
				}

				if(self.country != 'en'){
					methods.getEncryptedString().then(res => {
						if (res.data.code == 200) {
							if (res.data.data) {
								//加密用户手机号
								const maxUserIphone = encryption(self.form.user, res.data.data.key, res.data.data.iv);
								//加密用户密码
								//const maxPassword = encryption(self.form.pass, res.data.data.key, res.data.data.iv);
								let obj = {
									code: self.form.code,
									phone: maxUserIphone
								}
								methods.unregister(obj).then(res => {
									if (res.data.code == 200) {
										main.initialValue()
										uni.showToast({
											icon: 'none',
											title: res.data.message
										})
					
										setTimeout(() => {
											uni.reLaunch({
												url:'/pages/index/index'
											})
										}, 1000)
									}
								}).catch(err =>{
									uni.showToast({
										icon: 'none',
										title: err.data.message
									})
								})
							}
						}
					})
				}else{
					let obj = {
						code: self.form.code,
						email: self.form.user
					}
					methods.unregisterByEmail(obj).then(res => {
						if (res.data.code == 200) {
							//self.$store.state.isSx = true
							
							mian.initialValue()
							
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})
										
							setTimeout(() => {
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}, 1000)
						}
					}).catch(err =>{
						uni.showToast({
							icon: 'none',
							title: err.data.message
						})
					})
				}
				
			},
			send() {
				let self = this
				if(self.country != 'en'){
					methods.getEncryptedString().then(res => {
						if (res.data.code == 200) {
							if (res.data.data) {
								//加密用户手机号
								const maxUserIphone = encryption(self.form.user, res.data.data.key, res.data.data.iv);
								//加密用户密码
								//const maxPassword = encryption(self.form.pass, res.data.data.key, res.data.data.iv);
								let obj = {
									code: '',
									phone: maxUserIphone
								}
								methods.unregister(obj).then(res => {
									if (res.data.code == 100) {
										self.countDown = 60
										self.codeFalg = false
										self.codeDsObj = setInterval(() => {
											self.countDown -= 1
										}, 1000)
					
										uni.showToast({
											icon: 'none',
											title: res.data.message
										})
									}
								})
							}
						}
					})
				}else{
					let obj = {
						code: '',
						email:self.form.user
					}
					methods.unregisterByEmail(obj).then(res => {
						if (res.data.code == 100) {
							self.countDown = 60
							self.codeFalg = false
							self.codeDsObj = setInterval(() => {
								self.countDown -= 1
							}, 1000)
										
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})
						}
					})
				}
				

			},
			agreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			privacy() {
				uni.navigateTo({
					url: '/pages/agreement/privacy'
				})
			},
			change(e) {

			},
			miLogin() {
				uni.navigateBack()
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close() {
				this.$refs.popup.close()
			},
			back() {
				uni.navigateBack()
			},
			dialogToggle() {
				if (!this.form.code) {
					uni.showToast({
						icon: 'none',
						title: this.$t('login.14')
					})
					return
				}
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.logout()
			},
			dialogClose() {
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(to bottom, #DFD7F9 0px, #f2f0f9 398rpx, #F5F6F8 100%);
	}
	.pcls {
		font-size: 25rpx;
		color: #000000;
	}
</style>